<template>
  <el-dialog :visible.sync="visible" :close-on-click-modal="false" :title="$tt('label_sku_select')"
    custom-class="dialog_big">

    <el-form :label-width="$globalCss.formLabelWidth_default" label-position="right" ref="TaskAssignForm">
      <el-form-item :label="$tt('label_customer_info')" class="form_item_default">
        <span class="bold">{{ $formatNameCode(customerName, customerCode) }}</span>
      </el-form-item>
      <el-form-item :label="$tt('label_sku_name_or_code')" class="form_item_default">
        <el-input v-model="skuBarcodeOrSkuName" clearable :placeholder="$tt('tip_please_input_sku_name_or_code')"
          @input="searchInput">
          <el-button slot="append" icon="el-icon-search" @click="search">{{ $tt('label_search') }}</el-button>
        </el-input>
      </el-form-item>
      <el-form-item label-width="0">
        <ex_super_table ref="MainTable" v-bind="tableOption" :autoPage="true" height="400" :autoLoad="false"
          @selection-change="e => selection = e" @grid-data-change="e => skuList = e" />
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog_footer">
      <el-button @click="visible = false">{{ $tt('label_cancel') }}</el-button>
      <el-button type="primary" @click="submit">{{ $tt('label_submit') }}</el-button>
    </span>

  </el-dialog>
</template>

<script>

export default {
  name: 'mms_sku_batch_select',
  props: {},
  data() {
    return {
      skuBarcodeOrSkuName: "",
      visible: false,

      selection: [],
      skuList: [],
      customerId: null,
      customerName: null,
      customerCode: null,
      tableOption: {
        url: "/mms-api/sku/MmsSkuInfoRpc/selectByMmsSkuInfo.json",
        urlParams: (loadParam) => { return { ...loadParam, customerId: this.customerId, skuBarcodeOrSkuName: this.skuBarcodeOrSkuName } },
        model: [
          { type: 'selection', clickToggle: true, },
          { key: 'skuBarcode', label: 'label_sku_code', 'min-width': 140, 'show-overflow-tooltip': true, },
          { key: 'skuName', label: 'label_sku_name', 'min-width': 140, 'show-overflow-tooltip': true, },

          {
            key: 'skuDeclaredValue', label: 'label_declared_value', 'min-width': 120, 'show-overflow-tooltip': true,
            formatter: (r, c, v, i) => this.$formatNameCode(v, r.currencyCode)
          },
          { key: 'skuWeight', label: 'label_weight', 'min-width': 100, 'show-overflow-tooltip': true, },
          { key: 'skuVolume', label: 'label_volume', 'min-width': 100, 'show-overflow-tooltip': true, },
          {
            key: 'isElectrify', label: 'label_is_electrify', 'min-width': 100, 'show-overflow-tooltip': true,
            formatter: (r, c, v, i) => this.$enumShow(v, "YesOrNoEnum")
          },

        ],
      },
    }
  },

  methods: {
    search() {
      this.$refs['MainTable'].reload()
    },
    searchInput: _.debounce(function () {
      this.search()
    }, 1000),
    show(option) {
      this.visible = true
      const oldId = this.customerId
      Object.assign(this, option)
      if (this.skuList.length == 0 || this.customerId != oldId) {
        this.skuBarcodeOrSkuName = ""
        this.$nextTick(() => {
          this.$refs['MainTable'].reload()
        })
      }

      if (this.$refs['MainTable']) this.$refs['MainTable'].clearSelection();
    },
    hide() {
      this.visible = false
    },

    submit() {
      let select = this.selection;
      if (select.length == 0) {
        return this.$message.error(this.$tt("tip_skuSelect_noSelect"))
      }
      this.$emit('afterSubmit', select)
      this.visible = false
    },
  }
}
</script>
